<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
		<style type="text/css">
			.menu_item {
				cursor: pointer;
				border: 1px solid #AAA;
				margin: 2px;
				padding: 2px;
				width: 100px;
				height: 50px;
				text-align: center;
				display: inline-block;
				vertical-align: top;
			}
		</style>
		<script type="text/javascript">
			$(document).ready( function() {
				alert('page loaded - hello world from jQuery');
				$('#content').html('<b>content changed by jquery</b>');
				$('.menu_item').click(function() {
					$('#content').html('menu item clicked');
				});
			});
		</script>
    </head>
    <body>
		<div class="menu_item">menu 1</div>
		<div class="menu_item">menu 2</div>
		<div class="menu_item">menu 3</div>
		<div id="content">empty content</div>
	</body>
	
</html>